<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Unicorn Admin</title>
		<meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/bootstrap-glyphicons.css" />
		<link rel="stylesheet" href="css/unicorn.main.css" />
		<link rel="stylesheet" href="css/unicorn.grey.css" class="skin-color" />	
	</head>
	<body>
		<div id="header">
			<h1><a href="./dashboard.html">Unicorn Admin</a></h1>	
			<a id="menu-trigger" href="#"><i class="glyphicon glyphicon-list"></i></a>	
		</div>
		
		<div id="search">
			<input type="text" placeholder="Search here..."/><button type="submit" class="tip-right" title="Search"><i class="glyphicon glyphicon-search"></i></button>
		</div>
		<div id="user-nav">
            <ul class="btn-group">
                <li class="btn" ><a title="" href="#"><i class="glyphicon glyphicon-user"></i> <span class="text">Profile</span></a></li>
                <li class="btn dropdown" id="menu-messages"><a href="#" data-toggle="dropdown" data-target="#menu-messages" class="dropdown-toggle"><i class="glyphicon glyphicon-envelope"></i> <span class="text">Messages</span> <span class="label label-danger">5</span> <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a class="sAdd" title="" href="#">new message</a></li>
                        <li><a class="sInbox" title="" href="#">inbox</a></li>
                        <li><a class="sOutbox" title="" href="#">outbox</a></li>
                        <li><a class="sTrash" title="" href="#">trash</a></li>
                    </ul>
                </li>
                <li class="btn"><a title="" href="#"><i class="glyphicon glyphicon-cog"></i> <span class="text">Settings</span></a></li>
                <li class="btn"><a title="" href="login.html"><i class="glyphicon glyphicon-share-alt"></i> <span class="text">Logout</span></a></li>
            </ul>
        </div>
            
		<div id="sidebar">
			<ul>
				<li><a href="index.html"><i class="glyphicon glyphicon-home"></i> <span>Dashboard</span></a></li>
				<li class="submenu">
					<a href="#"><i class="glyphicon glyphicon-th-list"></i> <span>Form elements</span> <span class="label">3</span></a>
					<ul>
						<li><a href="form-common.html">Common elements</a></li>
						<li><a href="form-validation.html">Validation</a></li>
						<li><a href="form-wizard.html">Wizard</a></li>
					</ul>
				</li>
				<li><a href="buttons.html"><i class="glyphicon glyphicon-tint"></i> <span>Buttons &amp; icons</span></a></li>
				<li><a href="interface.html"><i class="glyphicon glyphicon-pencil"></i> <span>Interface elements</span></a></li>
				<li><a href="tables.html"><i class="glyphicon glyphicon-th"></i> <span>Tables</span></a></li>
				<li><a href="grid.html"><i class="glyphicon glyphicon-th-list"></i> <span>Grid Layout</span></a></li>
				<li class="active submenu open">
					<a href="#"><i class="glyphicon glyphicon-file"></i> <span>Sample pages</span> <span class="label">4</span></a>
					<ul>
						<li><a href="invoice.html">Invoice</a></li>
						<li><a href="chat.html">Support chat</a></li>
						<li><a href="calendar.html">Calendar</a></li>
						<li class="active"><a href="gallery.html">Gallery</a></li>
					</ul>
				</li>
				<li>
					<a href="charts.html"><i class="glyphicon glyphicon-signal"></i> <span>Charts &amp; graphs</span></a>
				</li>
				<li>
					<a href="widgets.html"><i class="glyphicon glyphicon-inbox"></i> <span>Widgets</span></a>
				</li>
			</ul>
		
		</div>
		
		<div id="style-switcher">
			<i class="glyphicon glyphicon-arrow-left"></i>
			<span>Style:</span>
			<a href="#grey" style="background-color: #555555;border-color: #aaaaaa;"></a>
            <a href="#light-blue" style="background-color: #8399b0;"></a>
			<a href="#blue" style="background-color: #2D2F57;"></a>
			<a href="#red" style="background-color: #673232;"></a>
            <a href="#red-green" style="background-image: url('img/demo/red-green.png');background-repeat: no-repeat;"></a>
		</div>
		
		<div id="content">
			<div id="content-header">
				<h1>Gallery</h1>
				<div class="btn-group">
					<a class="btn" title="Manage Files"><i class="glyphicon glyphicon-file"></i></a>
					<a class="btn" title="Manage Users"><i class="glyphicon glyphicon-user"></i></a>
					<a class="btn" title="Manage Comments"><i class="glyphicon glyphicon-comment"></i><span class="label label-danger">5</span></a>
					<a class="btn" title="Manage Orders"><i class="glyphicon glyphicon-shopping-cart"></i></a>
				</div>
			</div>
			<div id="breadcrumb">
				<a href="#" title="Go to Home" class="tip-bottom"><i class="glyphicon glyphicon-home"></i> Home</a>
				<a href="#">Sample pages</a>
				<a href="#" class="current">Gallery</a>
			</div>
				<div class="row">
					<div class="col-12">
						<div class="widget-box">
							<div class="widget-title">
								<span class="icon">
									<i class="glyphicon glyphicon-picture"></i>
								</span>
								<h5>Gallery</h5>
							</div>
							<div class="widget-content">
								<div class="gallery-masonry">
                                    <div class="item">
										<a href="#" class="thumbnail">
											<img src="img/demo/img1.jpg" alt="">
										</a>
										<div class="actions">
											<div class="actions-inner">
												<a title="Edit" href="#" class="tip-top"><i class="glyphicon glyphicon-pencil icon-white"></i></a>
												<a title="Remove" href="#" class="tip-top"><i class="glyphicon glyphicon-trash icon-white"></i></a>
											</div>
										</div>
								    </div>
                                    <div class="item">
										<a href="#" class="thumbnail">
											<img src="img/demo/img2.jpg" alt="">
										</a>
										<div class="actions">
											<div class="actions-inner">
												<a title="Edit" href="#" class="tip-top"><i class="glyphicon glyphicon-pencil icon-white"></i></a>
												<a title="Remove" href="#" class="tip-top"><i class="glyphicon glyphicon-trash icon-white"></i></a>
											</div>
										</div>
							         </div><div class="item">
										<a href="#" class="thumbnail">
											<img src="img/demo/img3.jpg" alt="">
										</a>
										<div class="actions">
											<div class="actions-inner">
												<a title="Edit" href="#" class="tip-top"><i class="glyphicon glyphicon-pencil icon-white"></i></a>
												<a title="Remove" href="#" class="tip-top"><i class="glyphicon glyphicon-trash icon-white"></i></a>
											</div>
										</div>
								    </div><div class="item">
										<a href="#" class="thumbnail">
											<img src="img/demo/img4.jpg" alt="">
										</a>
										<div class="actions">
											<div class="actions-inner">
												<a title="Edit" href="#" class="tip-top"><i class="glyphicon glyphicon-pencil icon-white"></i></a>
												<a title="Remove" href="#" class="tip-top"><i class="glyphicon glyphicon-trash icon-white"></i></a>
											</div>
										</div>
								    </div><div class="item">
										<a href="#" class="thumbnail">
											<img src="img/demo/img5.jpg" alt="">
										</a>
										<div class="actions">
											<div class="actions-inner">
												<a title="Edit" href="#" class="tip-top"><i class="glyphicon glyphicon-pencil icon-white"></i></a>
												<a title="Remove" href="#" class="tip-top"><i class="glyphicon glyphicon-trash icon-white"></i></a>
											</div>
										</div>
								    </div><div class="item">
										<a href="#" class="thumbnail">
											<img src="img/demo/img6.jpg" alt="">
										</a>
										<div class="actions">
											<div class="actions-inner">
												<a title="Edit" href="#" class="tip-top"><i class="glyphicon glyphicon-pencil icon-white"></i></a>
												<a title="Remove" href="#" class="tip-top"><i class="glyphicon glyphicon-trash icon-white"></i></a>
											</div>
										</div>
							         </div><div class="item">
										<a href="#" class="thumbnail">
											<img src="img/demo/img7.jpg" alt="">
										</a>
										<div class="actions">
											<div class="actions-inner">
												<a title="Edit" href="#" class="tip-top"><i class="glyphicon glyphicon-pencil icon-white"></i></a>
												<a title="Remove" href="#" class="tip-top"><i class="glyphicon glyphicon-trash icon-white"></i></a>
											</div>
										</div>
								    </div><div class="item">
										<a href="#" class="thumbnail">
											<img src="img/demo/img8.jpg" alt="">
										</a>
										<div class="actions">
											<div class="actions-inner">
												<a title="Edit" href="#" class="tip-top"><i class="glyphicon glyphicon-pencil icon-white"></i></a>
												<a title="Remove" href="#" class="tip-top"><i class="glyphicon glyphicon-trash icon-white"></i></a>
											</div>
										</div>
								    </div><div class="item">
										<a href="#" class="thumbnail">
											<img src="img/demo/img9.jpg" alt="">
										</a>
										<div class="actions">
											<div class="actions-inner">
												<a title="Edit" href="#" class="tip-top"><i class="glyphicon glyphicon-pencil icon-white"></i></a>
												<a title="Remove" href="#" class="tip-top"><i class="glyphicon glyphicon-trash icon-white"></i></a>
											</div>
										</div>
									</div><div class="item">
										<a href="#" class="thumbnail">
											<img src="img/demo/img10.jpg" alt="">
										</a>
										<div class="actions">
											<div class="actions-inner">
												<a title="Edit" href="#" class="tip-top"><i class="glyphicon glyphicon-pencil icon-white"></i></a>
												<a title="Remove" href="#" class="tip-top"><i class="glyphicon glyphicon-trash icon-white"></i></a>
											</div>
										</div>
								    </div><div class="item">
										<a href="#" class="thumbnail">
											<img src="img/demo/img11.jpg" alt="">
										</a>
										<div class="actions">
											<div class="actions-inner">
												<a title="Edit" href="#" class="tip-top"><i class="glyphicon glyphicon-pencil icon-white"></i></a>
												<a title="Remove" href="#" class="tip-top"><i class="glyphicon glyphicon-trash icon-white"></i></a>
											</div>
										</div>
								    </div><div class="item">
										<a href="#" class="thumbnail">
											<img src="img/demo/img12.jpg" alt="">
										</a>
										<div class="actions">
											<div class="actions-inner">
												<a title="Edit" href="#" class="tip-top"><i class="glyphicon glyphicon-pencil icon-white"></i></a>
												<a title="Remove" href="#" class="tip-top"><i class="glyphicon glyphicon-trash icon-white"></i></a>
											</div>
										</div>
							         </div><div class="item">
										<a href="#" class="thumbnail">
											<img src="img/demo/img13.jpg" alt="">
										</a>
										<div class="actions">
											<div class="actions-inner">
												<a title="Edit" href="#" class="tip-top"><i class="glyphicon glyphicon-pencil icon-white"></i></a>
												<a title="Remove" href="#" class="tip-top"><i class="glyphicon glyphicon-trash icon-white"></i></a>
											</div>
										</div>
							         </div><div class="item">
										<a href="#" class="thumbnail">
											<img src="img/demo/img14.jpg" alt="">
										</a>
										<div class="actions">
											<div class="actions-inner">
												<a title="Edit" href="#" class="tip-top"><i class="glyphicon glyphicon-pencil icon-white"></i></a>
												<a title="Remove" href="#" class="tip-top"><i class="glyphicon glyphicon-trash icon-white"></i></a>
											</div>
										</div>
							         </div><div class="item">
										<a href="#" class="thumbnail">
											<img src="img/demo/img15.jpg" alt="">
										</a>
										<div class="actions">
											<div class="actions-inner">
												<a title="Edit" href="#" class="tip-top"><i class="glyphicon glyphicon-pencil icon-white"></i></a>
												<a title="Remove" href="#" class="tip-top"><i class="glyphicon glyphicon-trash icon-white"></i></a>
											</div>
										</div>
								    </div><div class="item">
										<a href="#" class="thumbnail">
											<img src="img/demo/img16.jpg" alt="">
										</a>
										<div class="actions">
											<div class="actions-inner">
												<a title="Edit" href="#" class="tip-top"><i class="glyphicon glyphicon-pencil icon-white"></i></a>
												<a title="Remove" href="#" class="tip-top"><i class="glyphicon glyphicon-trash icon-white"></i></a>
											</div>
										</div>
								    </div><div class="item">
										<a href="#" class="thumbnail">
											<img src="img/demo/img17.jpg" alt="">
										</a>
										<div class="actions">
											<div class="actions-inner">
												<a title="Edit" href="#" class="tip-top"><i class="glyphicon glyphicon-pencil icon-white"></i></a>
												<a title="Remove" href="#" class="tip-top"><i class="glyphicon glyphicon-trash icon-white"></i></a>
											</div>
										</div>
								    </div><div class="item">
										<a href="#" class="thumbnail">
											<img src="img/demo/img18.jpg" alt="">
										</a>
                                        
										<div class="actions">
											<div class="actions-inner">
												<a title="Edit" href="#" class="tip-top"><i class="glyphicon glyphicon-pencil icon-white"></i></a>
												<a title="Remove" href="#" class="tip-top"><i class="glyphicon glyphicon-trash icon-white"></i></a>
											</div>
										</div>
								    </div>
                                </div>
                                <span style="font-size: 10px; color: #888888;">All Images licensed under <a href="http://creativecommons.org/licenses/by-nd/2.0/deed.en">Creative Commons BY-ND 2.0</a>, <a href="http://www.flickr.com/photos/sbl83/">stilettobootlover_83's</a></span>
							</div>
						</div>
                        
					</div>
				</div>
		</div>
		<div class="row">
			<div id="footer" class="col-12">
				2012 - 2013 &copy; Unicorn Admin. Brought to you by <a href="https://wrapbootstrap.com/user/diablo9983">diablo9983</a>
			</div>
		</div>		
		
            
            <script src="js/jquery.min.js"></script>
            <script src="js/jquery-ui.custom.js"></script>
            <script src="js/bootstrap.min.js"></script>
            <script src="js/jquery.jpanelmenu.min.js"></script>
            <script src="js/jquery.masonry.min.js"></script>
            <script src="js/unicorn.js"></script>
            <script>
                $(function(){
                    $('.gallery-masonry').masonry({
                      itemSelector: '.item',
                      isAnimated: true,
                      isFitWidth: true
                    });                    
                });
            </script>
	</body>
</html>
